import * as React from 'react';
import {
    StyleSheet,
    View,
    TouchableWithoutFeedback,
    ToastAndroid,
} from 'react-native';
import ListItem from './list-item';
import { ListModel } from './list-model';

interface IListContainerProps {
    dataSource: ListModel[]
    onPress(id: string): any
}

class ListContainer extends React.Component<IListContainerProps>{
    public render() {
        const data = this.props.dataSource || []
        const listItem = data.map((item, index) =>
            <TouchableWithoutFeedback onPress={() => {
                this.props.onPress(item.id)
            }}>
                <View>
                    <ListItem listItem={item} showSplit={index != data.length - 1} />
                </View>
            </TouchableWithoutFeedback>
        )
        return (
            <View style={styles.container}>
                {listItem}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#FFFFFF",
        borderRadius: 12,
        marginTop: 20,
        borderColor: '#F0F0F0',
        borderWidth: 0.6
    },
});

export default ListContainer